import * as YvanUI from "yvan-ui-wotu"
import Area from '../../area'

const React = YvanUI.React
const {Card} = YvanUI.Antd
const Observer = YvanUI.Observer
const _ = YvanUI.lodash

interface Ref {
    theForm: YvanUI.Form
}

export default class DemoData extends YvanUI.Scope<void, Ref> {

    main = this.$$({
        s51: '',
        s52: '',
        s53: ''
    })

    controlData: any = this.$$({})

    appendButton(variName: string) {
        return [
            {
                view: 'button',
                text: '设值',
                onClick: () => {
                    this.main[variName] = '420000'
                }
            },
            {
                view: 'button',
                text: '更改选项',
                onClick: () => {
                    // this.refs[variName].data.splice(0, 0, {adcode: '000000', name: '全国'})
                    this.controlData[variName].data.splice(0, 0, {adcode: '000000', name: '全国'})
                }
            }
        ]
    }

    vjson = {
        view: 'page',
        title: '数据源演示',
        $default: {
            labelCol: {span: 4},
            wrapperCol: {span: 8},
        },
        items: [
            {
                view: 'card',
                items: [
                    {
                        view: 'form',
                        debug: 'main',
                        ref: 'theForm',
                        items: [
                            {
                                view: 'row',
                                gutter: 16,
                                items: [
                                    {
                                        view: 'col',
                                        span: 12,
                                        items: [
                                            {
                                                label: '方式1',
                                                view: 'select',
                                                bind: 'main.s1',
                                                dataBind: 'controlData.s1',
                                                idField: 'adcode',
                                                labelField: 'name',
                                                ref: 's1',
                                                rules: [
                                                    {required: true}
                                                ],
                                                data: _.map(Area, (row: any) => {
                                                    return {
                                                        adcode: _.trim(row.adcode),
                                                        name: _.trim(row.name)
                                                    }
                                                })
                                            },
                                        ]
                                    },
                                    ...this.appendButton('s1')
                                ]
                            },
                            {
                                view: 'divider',
                                title: '方式3 JS方法'
                            },
                            {
                                view: 'row',
                                gutter: 16,
                                items: [
                                    {
                                        view: 'col',
                                        span: 12,
                                        items: [
                                            {
                                                label: '方式3',
                                                view: 'select',
                                                bind: 'main.s3',
                                                dataBind: 'controlData.s3',
                                                idField: 'adcode',
                                                labelField: 'name',
                                                rules: [
                                                    {required: true}
                                                ],
                                                dataSource: () => {
                                                    return new Promise(resolve => {
                                                        setTimeout(() => {
                                                            resolve(
                                                                _.map(Area, (row: any) => ({
                                                                    adcode: _.trim(row.adcode),
                                                                    name: _.trim(row.name)
                                                                }))
                                                            )
                                                        }, 3000)
                                                    })
                                                }
                                            },
                                        ]
                                    },
                                    ...this.appendButton('s3')
                                ]
                            },
                            {
                                view: 'divider',
                                title: '方式4 JS方法-带不定参'
                            },
                            {
                                view: 'row',
                                gutter: 16,
                                items: [
                                    {
                                        view: 'col',
                                        span: 12,
                                        items: [
                                            {
                                                label: '方式4',
                                                view: 'select',
                                                bind: 'main.s4',
                                                dataBind: 'controlData.s4',
                                                idField: 'adcode',
                                                labelField: 'name',
                                                rules: [
                                                    {required: true}
                                                ],
                                                dataSource: {
                                                    func: ({parent}) => {
                                                        return new Promise(resolve => {
                                                            setTimeout(() => {
                                                                const d = _.find(Area, {adcode: parseInt(parent)}).children
                                                                if (!d) {
                                                                    resolve(null)
                                                                    return
                                                                }
                                                                resolve(_.map(d, (row: any) => {
                                                                    return {
                                                                        adcode: _.trim(row.adcode),
                                                                        name: _.trim(row.name)
                                                                    }
                                                                }))
                                                            }, 3000)
                                                        })
                                                    },

                                                    params: () => {
                                                        return {
                                                            parent: '420000'
                                                        }
                                                    }
                                                }
                                            },
                                        ]
                                    },
                                    ...this.appendButton('s4')
                                ]
                            },
                            {
                                view: 'divider',
                                title: '方式5 JS方法-带定参联动'
                            },
                            {
                                view: 'row',
                                gutter: 16,
                                items: [
                                    {
                                        label: '省',
                                        view: 'select',
                                        width: 400,
                                        bind: 'main.s51',
                                        dataBind: 'controlData.s51',
                                        idField: 'adcode',
                                        labelField: 'name',
                                        rules: [
                                            {required: true}
                                        ],
                                        data: _.map(Area, (row: any) => {
                                            return {
                                                adcode: _.trim(row.adcode),
                                                name: _.trim(row.name)
                                            }
                                        })
                                    },
                                    {
                                        label: '市',
                                        width: 400,
                                        view: 'select',
                                        bind: 'main.s52',
                                        dataBind: 'controlData.s52',
                                        idField: 'adcode',
                                        labelField: 'name',
                                        rules: [
                                            {required: true}
                                        ],
                                        value: {$watch: () => this.main.s51, $then: () => ''},
                                        visible: this.$watch(() => !!this.main.s51),
                                        dataSource: {
                                            func: ({parent}) => {
                                                return new Promise(resolve => {
                                                    setTimeout(() => {
                                                        const d = _.find(Area, {adcode: parseInt(parent)})
                                                        if (!d) {
                                                            resolve(null)
                                                            return
                                                        }
                                                        resolve(_.map(d.children, (row: any) => {
                                                            return {
                                                                adcode: row.adcode,
                                                                name: row.name
                                                            }
                                                        }))
                                                    }, 1000)
                                                })
                                            },

                                            params: {
                                                parent: {$watch: () => this.main.s51}
                                            }
                                        }
                                    },
                                    {
                                        label: '区',
                                        width: 400,
                                        view: 'select',
                                        bind: 'main.s53',
                                        dataBind: 'controlData.s53',
                                        idField: 'adcode',
                                        labelField: 'name',
                                        rules: [
                                            {required: true}
                                        ],
                                        value: {$watch: () => this.main.s52, $then: () => ''},
                                        visible: this
                                            .$watch(() => [this.main.s51, this.main.s52])
                                            .$then(([s51, s52]) => {
                                                const d = _.find(Area, {adcode: parseInt(s51)})
                                                if (!d) {
                                                    return (false)
                                                }
                                                const d2: any = _.find(d.children, {adcode: parseInt(s52)})
                                                if (!d2) {
                                                    return (false)
                                                }
                                                if (typeof d2.children === 'undefined') {
                                                    return (false)
                                                }
                                                return (true)
                                            }),
                                        dataSource: {
                                            func: ({parentParent, parent}) => {
                                                return new Promise(resolve => {
                                                    setTimeout(() => {
                                                        const d = _.find(Area, {adcode: parseInt(parentParent)})
                                                        if (!d) {
                                                            resolve(null)
                                                            return
                                                        }
                                                        const d2: any = _.find(d.children, {adcode: parseInt(parent)})
                                                        if (!d2) {
                                                            resolve(null)
                                                            return
                                                        }
                                                        resolve(_.map(d2.children, (row: any) => {
                                                            return {
                                                                adcode: row.adcode,
                                                                name: row.name
                                                            }
                                                        }))
                                                    }, 1000);
                                                })
                                            },

                                            params: {
                                                parentParent: () => this.main.s51,
                                                parent: {$watch: () => this.main.s52}
                                            }
                                        }
                                    },
                                    {
                                        view: 'button',
                                        text: '设值',
                                        rules: [
                                            {required: true}
                                        ],
                                        onClick: () => {
                                            this.main.s51 = '420000'
                                            this.main.s52 = '420100'
                                            this.main.s53 = '420105'
                                        }
                                    },
                                ]
                            },
                            {
                                view: 'divider',
                                title: 'onDataSourceAfter 获取后加工数据'
                            },
                            {
                                view: 'row',
                                gutter: 16,
                                items: [
                                    {
                                        label: '异步修改DS数据',
                                        view: 'select',
                                        bind: 'main.s61',
                                        width: 400,
                                        dataBind: 'controlData.s61',
                                        idField: 'adcode',
                                        labelField: 'name',
                                        rules: [
                                            {required: true}
                                        ],
                                        onDataSourceAfter(sender: YvanUI.Select, dataOrgin: any[]) {
                                            return new Promise(resolve => {
                                                setTimeout(() => {
                                                    resolve([{adcode: '', name: '全部'}].concat(dataOrgin))
                                                }, 3000)
                                            })
                                        },
                                        dataSource: () => {
                                            return _.map(Area, (row: any) => {
                                                return {
                                                    adcode: _.trim(row.adcode),
                                                    name: _.trim(row.name)
                                                }
                                            })
                                        }
                                    },
                                    {
                                        label: '同步修改DS数据',
                                        view: 'select',
                                        bind: 'main.s62',
                                        width: 400,
                                        dataBind: 'controlData.s62',
                                        idField: 'adcode',
                                        labelField: 'name',
                                        rules: [
                                            {required: true}
                                        ],
                                        onDataSourceAfter(sender: YvanUI.Select, dataOrgin: any[]) {
                                            return [{adcode: '', name: '全部'}].concat(dataOrgin)
                                        },
                                        dataSource: () => {
                                            return _.map(Area, (row: any) => {
                                                return {
                                                    adcode: _.trim(row.adcode),
                                                    name: _.trim(row.name)
                                                }
                                            })
                                        }
                                    },
                                    {
                                        label: '取消获取数据',
                                        view: 'select',
                                        bind: 'main.s63',
                                        width: 400,
                                        dataBind: 'controlData.s63',
                                        idField: 'adcode',
                                        labelField: 'name',
                                        onDataSourceAfter(sender: YvanUI.Select, dataOrgin: any[]) {
                                            // 取消本次数据
                                            return null
                                        },
                                        dataSource: () => {
                                            return _.map(Area, (row: any) => {
                                                return {
                                                    adcode: _.trim(row.adcode),
                                                    name: _.trim(row.name)
                                                }
                                            })
                                        }
                                    },
                                    {
                                        label: '取消获取数据',
                                        view: 'select',
                                        bind: 'main.s64',
                                        width: 400,
                                        dataBind: 'controlData.s64',
                                        idField: 'adcode',
                                        labelField: 'name',
                                        onDataSourceAfter(sender: YvanUI.Select, dataOrgin: any[]) {
                                            // 取消本次数据,以后一次为主
                                            return [{adcode: '', name: '客户端数据'}]
                                        },
                                        dataSource: () => {
                                            return _.map(Area, (row: any) => {
                                                return {
                                                    adcode: _.trim(row.adcode),
                                                    name: _.trim(row.name)
                                                }
                                            })
                                        }
                                    }
                                ]
                            },
                            {
                                view: 'divider',
                                title: 'Ajax'
                            },
                            // {
                            //     view: 'row',
                            //     gutter: 16,
                            //     items: [
                            //         {
                            //             view: 'select',
                            //             label: 'ServerJS 获取',
                            //             bind: 'main.s65',
                            //             width: 400,
                            //             dataBind: 'controlData.s65',
                            //             idField: 'SYSSOURCE',
                            //             labelField: 'SYSSOURCE_NAME',
                            //             rules: [
                            //                 {required: true}
                            //             ],
                            //             onDataSourceAfter(sender: YvanUI.Select, dataOrgin: any[]) {
                            //                 return [{SYSSOURCE: '', SYSSOURCE_NAME: '全部'}].concat(dataOrgin)
                            //             },
                            //             dataSource: {
                            //                 url: 'http://mdm.dev.jzterp.net/!/Query/CommonQueryService@selectSysSource',
                            //                 method: 'post-json',
                            //                 params: {
                            //                     args: [1]
                            //                 }
                            //             }
                            //         },
                            //         {
                            //             view: 'select',
                            //             label: 'ServerJS 取消',
                            //             bind: 'main.s66',
                            //             width: 400,
                            //             //dataBind: 'controlData.s66',
                            //             idField: 'SYSSOURCE',
                            //             labelField: 'SYSSOURCE_NAME',
                            //             onDataSourceBefore(sender: YvanUI.Select, apiObject: any) {
                            //                 console.log('apiObject', apiObject)
                            //                 return [{SYSSOURCE: '', SYSSOURCE_NAME: '取消数据获取'}]
                            //             },
                            //             dataSource: {
                            //                 url: 'http://mdm.dev.jzterp.net/!/Query/CommonQueryService@selectSysSource',
                            //                 method: 'post-json',
                            //                 params: {
                            //                     args: [1]
                            //                 }
                            //             }
                            //         },
                            //     ]
                            // }
                            // {
                            //     label: 'ServerJS 获取',
                            //     view: 'select',
                            //     bind: 'query.f4',
                            //     idField: 'id',
                            //     labelField: 'text',
                            //     onApiAfter(sender: YvanUI.Select, dataOrgin: any[]) {
                            //         return [{id: '', text: '全部'}]
                            //             .concat(dataOrgin)
                            //     },
                            //     api: {
                            //         url: '/RootService@getDemoData',
                            //         data: {
                            //             v1: 'v1',
                            //             v2: {'@watch': "query.f2"},
                            //             v3: {'@get': "query.f3"},
                            //         }
                            //     }
                            // },
                            // {
                            //     label: 'Ajax 获取',
                            //     view: 'select',
                            //     bind: 'query.f5',
                            //     onApiAfter(sender: YvanUI.Select, dataOrgin: any[]) {
                            //         return [{value: '', label: '全部'}]
                            //             .concat(dataOrgin)
                            //     },
                            //     api: {
                            //         url: '/!/RootService@getDemoData2',
                            //         method: 'post-json',
                            //         data: {
                            //             v1: 'v1',
                            //             v2: {'@watch': "query.f2"},
                            //             v3: {'@get': "query.f3"},
                            //         }
                            //     }
                            // },
                        ]
                    }
                ]
            }
        ],
        footer: [
            {
                view: 'button',
                text: '保存',
                type: 'primary',
                icon: 'fa fa-save',
                onClick: () => this.refs.theForm.validateFields().then((e) => {
                    YvanUI.showSuccess(<pre>{JSON.stringify(e, null, ' ')}</pre>)

                }).catch(e => {
                    YvanUI.showValidateErrorDialog(this, e)
                })
            },
            {
                view: 'button',
                text: '清空',
                icon: 'fa fa-times',
                onClick: () => {
                    this.refs.theForm.resetFields()
                }
            }
        ]
    }

    onRender() {
        window['biz'] = this
    }

}